import { ref, type Ref, watchEffect } from 'vue'
export const useSize = (domRef: Ref<HTMLElement | null>) => {
  const width = ref<number>(0)
  const height = ref<number>(0)
  const observer = new ResizeObserver(() => {
    if (domRef.value) {
      width.value = domRef.value.clientWidth
      height.value = domRef.value.clientHeight
    }
  })
  //设置一个变量来存储dom元素，让ResizeObserver知道它要监听哪个元素
  //因为domRef.value可能会变化，所以我们需要一个变量来存储它,这样我们就可以在domRef.value变化的时候取消监听，防止内存泄漏并提高性能
  //如果在该函数中需要同时监听多个dom，可以考虑使用weakMap来存储dom和ResizeObserver实例
  let observerDom: HTMLElement | null = null
  watchEffect(() => {
    const newDom = domRef.value
    //如果我们传入的dom存在，就让ResizeObserver监听它
    //如果我们传入的dom不存在，就让ResizeObserver取消监听
    if (newDom) {
      observerDom = newDom
      observer.observe(observerDom)
    } else if (observerDom) {
      observer.unobserve(observerDom)
    }
  })

  return { width, height }
}
